<template>
	<div id="Details">
		<!-- <div id="new_header">
		    <div class="page-container new-header" id="nav">
		        <ul class="nav-item"> 
		            <li><a href="https:https://www.imooc.com" target="_self" class="imooc">千课网首页</a></li>
		            <li><a href="https:https://www.imooc.com/course/list" target="_self">免费课程</a></li>           
		            <li><a href="https://coding.imooc.com" target="_self">实战课程</a></li>
		            <li><a href="/" class="active" target="_self">金职位<i class="icn-new"></i></a></li>
		            <li><a href="https://www.imooc.com/wiki" target="_self">wiki</a></li>
		            <li><a href="https://www.imooc.com/read" target="_self">专栏</a></li>
		            <li><a href="https://www.imooc.com/article" target="_self">手记</a></li> 
		        </ul>
		        <div class="header-right clearfix">
		            <div class="app-download" id="js-app-load">
		                <a href="https://www.imooc.com/mobile/app" target="_blank">下载APP</a>
		                <div class="app-load-box clearfix js-load-box">
		                    <div class="mobile-load-box">
		                        <h4>慕课网APP - 随时随地学编程</h4>
		                        <img src="https://www.imooc.com/static/img/common/appload.png" class="l">
		                        <div class="r">
		                            <a class="app-load-btn" href="https://itunes.apple.com/cn/app/mu-ke-wang/id722179140?mt=8" target="_blank"><i class="icon-apple"></i>App Store下载</a>
		                            <a class="app-load-btn" href="https://www.imooc.com/mobile/appdown" target="_blank"><i class="icon-android"></i>Android下载</a>
		                            <p>扫描下载慕课网APP</p>
		                        </div> 
		                    </div>
		                </div>
		            </div>
		            <div class="search-box">
		                <a href="javascript:void(0);" id="common-nav-search">
		                    <i class="imv2-search2"></i>
		                </a>
		                <div class="input-search hide" id="common-input-search">
		                    <div class="input-box">
		                        <input type="text" class="nav-search-input" autocomplete="off">
		                        <a href="javascript:void(0);" class="nav-searchBtn js-nav-searchBtn">
		                            <i class="imv2-search2"></i>
		                        </a>
		                    </div>
		                    <div class="nav-search-box hide">
		                        <div class="hot">
		                            <h2>热搜</h2>
		                            <div class="hot-box"><a href="javascript:void(0)" class="hot-item js-history-search">Vue</a><a href="javascript:void(0)" class="hot-item js-history-search">Python</a><a href="javascript:void(0)" class="hot-item js-history-search">Java</a><a href="javascript:void(0)" class="hot-item js-history-search">flutter</a><a href="javascript:void(0)" class="hot-item js-history-search">springboot</a><a href="javascript:void(0)" class="hot-item js-history-search">docker</a><a href="javascript:void(0)" class="hot-item js-history-search">React</a><a href="javascript:void(0)" class="hot-item js-history-search">小程序</a></div>
		                        </div>
		                        <div class="history hide">
		                            <h2>最近搜索<a href="javascript:void(0);" class="history-clear js-clear-history">清空</a></h2>
		                            <div class="history-box">
		                            </div>
		                        </div>
		                    </div>
		                    <div class="nav-correlate-box hide">
		                        <div class="correlate">
		                        </div>
		                    </div>
		                </div>
		            </div>
		            <div class="shop-cart" id="shop-cart">
		                <a href="//order.imooc.com/pay/cart" class="shop-cart-icon" target="_blank">
		                    <span class="imv2-shopping-cart2 js-endcart"></span><span class="shopping_icon js-cart-num" data-prevnum="0" data-ordernum="0" data-cartnum="0" style="display: none">0</span>
		                </a>
		                <div class="my-cart" id="js-my-cart"></div>
		            </div>
		                        <div id="login-area">
		                <ul class="header-unlogin clearfix">
		                    <li class="header-signin">
		                        <a href="//www.imooc.com/user/newlogin" id="js-signin-btn">登录</a> / <a href="//www.imooc.com/user/newsignup" id="js-signup-btn">注册</a>
		                    </li>             
		                </ul>
		            </div>
		                    </div>
		    </div>
		</div> -->
		<div class="course-infos-top " style="background-image:url(https://img1.sycdn.imooc.com/szimg/5efe9536098f87d720000400.jpg)">
			<div class="info-wrap">
				<!-- <div class="path">
					<a href="https://www.imooc.com">
						<i class="imv2-imooc"></i>
					</a>
					<i class="split">/</i>
					<a href="/">实战</a>
					<i class="split">/</i>
					<span>.Net Core 开发电商后端API   从0到精通吃透RESTful</span>
				</div>
				<div class="extra">
					<div class="course-collect clearfix js-course-collect l" data-type="0" data-cid="451">
						<i class="imv2-star j"></i><span>收藏</span>
					</div> -->
					<!-- 分销的分享不同于普通分享 -->
					<!-- <div class="share-action l bdsharebuttonbox bg bdshare-button-style0-16" data-bd-bind="1594178427921">
											<a href="javascript:;" class="share sz-weixin" data-cmd="weixin" title="分享到微信">
							</a>
							<a href="javascript:;" class="share sz-weibo" data-cmd="tsina" title="分享到新浪微博">
							</a>
							<a href="javascript:;" data-cmd="qzone" class="share sz-qq" title="分享到QQ空间">
							</a>
									</div>
				</div> -->
		
				<div class="title-box">
					<h1>.Net Core 开发电商后端API   <br>吃透RESTful风格</h1>
												<h2>首门. Net Core实战+RESTful思想纵深课程，开发极致RESTful风格API</h2>
							</div>
				
				<div class="hide">
					<h1 class="l">.Net Core 开发电商后端API   从0到精通吃透RESTful</h1>
				</div>
		
			</div>
							<div class="fixed-wrap" style="bottom:-64px">
				<div class="con">
															<!-- 只在未购买和已购买正常转状态显示 -->
						<div class="time-price clearfix">
																				<div class="discount clearfix l">
										<!-- 限时促销 倒计时/整点免单 倒计时/学生惠 -->
										<div class="sale-timer l clearfix">
											<i class="name l">限时优惠</i>
																					<div class="timer js-sale-timer l" data-timer="2378373" data-endtime="1596556799">截止至8月4日</div>
																			</div>
										<div class="sale-price l">
											￥328.00
										</div>
										<div class="ori-price l">
											原价￥388.00
										</div>
									</div>
																		
							<div class="can-huabei l">
								<a href="https://www.imooc.com/help/detail/110" target="_blank">花呗付款</a>
							</div>
							<div class="can-baitiao l">
								<a href="https://www.imooc.com/help/detail/131" target="_blank">京东白条</a>
							</div>
							
							                    
		                    				</div>
								<div class="info-bar clearfix" style="margin-top:0px">
							<span>难度</span>
							<span class="nodistance">初级</span>
							<i class="imv2-dot_samll"></i>
							<span>时长</span>
							<span class="nodistance">16小时</span>
							<i class="imv2-dot_samll"></i>
							<span>学习人数</span>
							<span class="nodistance">26</span>
							<i class="imv2-dot_samll"></i>
							<span>综合评分</span>
							<span class="nodistance">10.00</span>
																</div>
					<div class="btns">
											
															<a href="javascript:;" class="js-buy-trigger red-btn gobuy" data-cid="451" data-pay="0" id="buy-trigger">
										立即购买
									</a>
														<a href="javascript:;" class="js-addcart addcart" data-cid="451" data-type="1">
									加购物车
															</a>
								
							
														</div>
				</div>
			</div>
		</div>
	</div>
</template>
	
<script>
	export default {
		name:'Details'
	}
</script>

<style>
	@import url("../assets/css/util.css");
	#Details{
		color: #1c1f21;
		    font: 14px/1.5 "PingFang SC","微软雅黑","Microsoft YaHei",Helvetica,"Helvetica Neue",Tahoma,Arial,sans-serif;
		    background-color: #fff;
		    min-width: 1200px;
		    overflow-y: auto;
		    position: relative;
		    padding-top: 0;
		    -webkit-transition: -webkit-transform .3s ease;
		    transition: transform .3s ease;
	}
</style>
